﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoleList.aspx.cs" Inherits="House客户端.RoleList" %>

<!DOCTYPE html>
<script src="easyui/js/jquery-1.8.0.min.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>角色信息展示</title>
    <link href="jquery-easyui-1.5.2/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/css/wu.css" rel="stylesheet" />
    <link href="easyui/css/icon.css" rel="stylesheet" />
</head>
<body>
    <!----查询角色信息---->
    <div>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="newuser()">添加角色</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="AddAuthority()">设置权限</a>
        <input class="easyui-textbox" id="roles_Name" data-options="prompt:'请输入角色名称'" style="width: 30%; height: 27px">
        <a href="#" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'" onclick="GetSysRoles()" style="width: 80px; margin-bottom: 2px; margin-left: 10px; border: solid 1px #c0f6ef">查询</a>
    </div>
    <!----显示角色信息---->
    <div>
        <table id="dg" class="easyui-datagrid" title="显示角色信息" toolbar="#tb" rownumbers="true" pagination="true"></table>
    </div>
    <!----弹出框---->
    <div id="dlg" class="easyui-dialog" style="width: 400px; height: 200px; padding: 10px 20px; text-align: center" closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post" action="">
            <div class="fitem">
                <label id="m">
                    编号：
                </label>
                <input name="ID" class="easyui-validatebox" required id="ID" />
            </div>
            <br />
            <div class="fitem">
                <label>
                    角色名称：</label>
                <input name="Roles_Name" class="easyui-validatebox" required id="Roles_Name" />
            </div>
            <br />
            <div class="fitem">
                <label>
                    备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                <input name="Roles_Remarks" class="easyui-validatebox" required id="Roles_Remarks" />
            </div>
            <input type="hidden" name="action" id="hidtype" />
            <input type="hidden" name="roles_Id" id="Nameid" />
        </form>
    </div>
    <div id="dlg-buttons">
        <a class="easyui-linkbutton" onclick="saveuser()" iconcls="icon-save" id="upd">修改</a>
        <a class="easyui-linkbutton" iconcls="icon-save" id="save">保存</a>
        <a class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" iconcls="icon-cancel">取消</a>
    </div>
    <script src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script src="jquery-easyui-1.5.2/easyloader.js"></script>
    <script src="jquery-easyui-1.5.2/Common.js"></script>
    <script>
        GetSysRoles();
        //动态加载数据
        function GetSysRoles() {
            var name = $('#roles_Name').val();
            $.ajax({
                type: "get",
                url: WebApiURL + "/api/Role/?name=" + name,
                dataType: "json",
                success: function (obj) {
                    obj = eval(obj);
                    $("#dg").datagrid({
                        singleSelect: true,
                        columns: [[
                        { field: 'ID', title: '编号', align: 'center', closed: true },
                        { field: 'Roles_Name', align: 'center', title: '角色名称' },
                        { field: 'Roles_Remarks', align: 'center', title: '备注' },
                        {
                            field: 'Roles_IsState', title: '状态',
                            formatter: function (value, row, index) {
                                return 'roles_IsState' == 0 ? '未启用' : '已启用'
                            }
                        },
                        { field: '_operate', align: 'center', formatter: formatOper, title: '操作' },
                        ]]
                    });
                    $("#dg").datagrid("loadData", obj);//动态取数据
                }
            })
        }
        //添加自定义删除修改按钮
        function formatOper(val, row, index) {
            return '<a href="#" onclick="editUser(' + index + ')">修改</a>&nbsp;&nbsp;<a href="#" onclick="DelRole(' + index + ')">删除</a>&nbsp;&nbsp;<a href="#" onclick="UpdateState(' + index + ')">启用</a>';
        }
        //显示弹出框
        function editUser(index) {
            $('#dg').datagrid('selectRow', index);//关键在这里  
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', '修改角色信息');
                $('#fm').form('load', row);

            }
        }
        //修改角色
        function saveuser() {
            var roles_Id = $("#ID").val();
            var roles_Name = $("#Roles_Name").val();
            var roles_Remarks = $("#Roles_Remarks").val();
            $.ajax({
                type: "put",
                url: WebApiURL + '/api/Role',
                data: { ID: roles_Id, roles_Name: roles_Name, roles_Remarks: roles_Remarks },
                success: function (result) {
                    alert(result);
                    if (result == true) {
                        $.messager.alert("提示信息", "操作成功");
                        $("#dlg").dialog("close");
                        show();
                    }
                    else {
                        $.messager.alert("提示信息", "操作失败");
                    }
                }
            })
        }
        //删除角色
        function DelRole(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.ajax({
                    type: "delete",
                    url: WebApiURL + '/api/Role?id=' + row.ID,
                    success: function (result) {
                        if (result == true) {
                            $.messager.alert("提示信息", "操作成功");
                            $("#dlg").dialog("close");
                            show();
                        }
                        else {
                            $.messager.alert("提示信息", "操作失败");
                        }
                    }
                })
            }
        }
        //添加角色
        function newuser() {
            $("#dlg").dialog("open").dialog('setTitle', '添加角色信息');;
            $("#fm").form("clear");
            $("#ID").hide();
            $("#m").hide();
            $("#upd").hide();
            $("#save").on("click",
                function () {
                    var roles_Name = $("#Roles_Name").val();
                    var roles_Remarks = $("#Roles_Remarks").val();
                    $.ajax({
                        type: "post",
                        url: WebApiURL + '/api/Role',
                        data: { roles_Name: roles_Name, roles_Remarks: roles_Remarks },
                        success: function (result) {
                            alert(result);
                            if (result == true) {
                                $.messager.alert("提示信息", "操作成功");
                                $("#dlg").dialog("close");
                                show();
                            }
                            else {
                                $.messager.alert("提示信息", "操作失败");
                            }
                        }
                    })
                }
                )
        }


        //修改状态
        function UpdateState(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.ajax({
                    type: "post",
                    url: WebApiURL + '/api/Role?id=' + row.ID + "&state=" + row.Roles_IsState,
                    success: function (result) {
                        if (result == true) {
                            $.messager.alert("提示信息", "操作成功");
                            $("#dlg").dialog("close");
                            show();
                        }
                        else {
                            $.messager.alert("提示信息", "操作失败");
                        }
                    }
                })
            }
        }

    </script>
</body>
</html>
